<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="dd">
    <!--器材提示框-->
    <div class="scene_tips" v-if="false" :style="getPosition">
      <!-- <img src="@/images/scene_tips.png" class="img_back" /> -->
      <div class="scene_tipsall">{{ tipName }}</div>
    </div>
    <!-- 文字提示框 -->
    <!-- 注意事项 -->
    <!-- 电子天平数显 -->
  </div>
</template>
<script>
import { mixins } from '@/mixin/three'

export default {
  mixins: [mixins], //混入
  components: {},
  props: {
    eritems: Number, //当前二级小步骤
    eritem: Number, //当前所在的二级菜单
    sjstep: Number, //当前所在的三级菜单
    taskstep: Number //当前所在的一级菜单
  },
  // components: { tipError },
  data() {
    return {
      isPointerLocked: false,
      cameraMoveSensitivity: 0.4, //视角灵敏度
      leftMouseBtn: false,
      baseURL: 'https://zfatt.oss-cn-beijing.aliyuncs.com/experiment/shfx/',
      objectReItem: null,
      time: null,
      studyshow: false,
      action: null,
      andh: null,
      jcname: '',
      tipErrorShow: false,
      name: '', //标题名称
      info: '', //标题信息
      i: 1, //相机轨道控制器兼容性问题处理
      // step: 1, //步骤处理
      selectedObjects: [],
      tipPosition: {}, //图标位置
      tipName: null, //提示名字
      tipShow: false,
      playIng: false,
      camera: null,
      scene: null,
      render: null,
      raycaster: null,
      mouse: null,
      objects: [],
      objectFather: null,

      dhfiles: [
        {
          id: 1,
          url: 'LXJ_DH.glb'
        },
        {
          id: 2,
          url: 'FXY_DH.glb'
        }
      ],
      zoomSpeed: 1,

      cameraOriginal: [-4.51, 1.456, 0.574],
      cameraLookAt: [-4.51, 1.456, 0.674]
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    // document.removeEventListener('keydown', false)
    // document.removeEventListener('keyup', false)
  },
  watch: {
    //监听大步骤
    eritem: {
      handler(item) {
        // this.stopAndReleaseAnimations()
        console.log('小步骤值：' + item, this.taskstep)
        if (item == 2 && this.taskstep == 4) {
          console.log('')
        } else {
          this.andh = null
        }
        clearTimeout(this.time)
        if (this.action) {
          this.action.stop()
        }
        this.action = null

        // if (item == 1 && this.taskstep == 3) {
        //   this.initFileS(0)
        // }
      },
      immediate: true,
      deep: true
    }
  },

  methods: {
    //根据点击的模型播放动画
    clickAfter(realName) {
      console.log(
        '当前eritems',
        this.eritems,
        '当前taskstep',
        this.taskstep,
        '当前sjstep',
        this.sjstep
      )
      console.log('当前点击的模型', realName)
      this.twinklePoint(-3, -3, -3)
      // 动画还没加载完的情况
      if (!this.andh) {
        console.log('动画没加载完成')
        if (this.action) {
          this.action.stop()
          this.action.paused = true
        }
        this.action = null
        return
      }
      if (this.playIng) {
        // this.step
        if (!this.playIng) {
          console.log('当前任务还未完成禁止下一个')
        } else {
          return
        }
      }
      let animationName = ''

      //  正确第一步
      if (realName == 'LiXinJi17' && this.eritems == 1 && this.taskstep == 3) {
        // animationName = '1'
        this.$emit('clickItem', 'LiXinJi17')
        // this.$emit('audo', require('@/images/audios/pz02.mp3'))
      }
      if (realName == 'LiXinJi17' && this.eritems == 2 && this.taskstep == 3) {
        animationName = '1'
        // this.$emit('audo', require('@/images/audios/pz02.mp3'))
      }
      if (
        (realName == 'LiXinJi13_3' || realName == 'LiXinJi13_2') &&
        this.eritems == 2.1 &&
        this.taskstep == 3
      ) {
        this.$emit('tipstextfn', '已拿起离心样品')
        animationName = '2'
      }
      if (
        (realName == 'LiXinJi36_2' || realName == 'LiXinJi36_3') &&
        this.eritems == 3 &&
        this.taskstep == 3
      ) {
        this.$emit('tipstextfn', '已拿起平衡管')
        animationName = '3'
      }
      if (realName == 'LiXinJi4' && this.eritems == 3.1 && this.taskstep == 3) {
        animationName = '4'
        // this.$emit('audo', require('@/images/audios/pz02.mp3'))
      }
      if (realName == 'LiXinJi17' && this.eritems == 4 && this.taskstep == 3) {
        this.$emit('clickItem', '4')
        // this.$emit('audo', require('@/images/audios/pz02.mp3'))
      }
      if (realName == 'LiXinJi17' && this.eritems == 5 && this.taskstep == 3) {
        // animationName = '5'
        this.$emit('tipstextfn', '正在进行样品离心，请稍后')
        // this.$emit('audo', require('@/images/audios/pz02.mp3'))
      }
      if (realName == 'LiXinJi17' && this.eritems == 6 && this.taskstep == 3) {
        this.move(
          [14.125, 2.181, -2.372],
          [-89.73 / 180, -59.87 / 180, -89.69 / 180]
        )
        animationName = '5'
        // this.$emit('tipstextfn', '正在进行样品离心，请稍后')
        // this.$emit('audo', require('@/images/audios/pz02.mp3'))
      }
      if (
        (realName == 'LiXinJi11_1' || realName == 'LiXinJi12') &&
        this.eritems == 6.1 &&
        this.taskstep == 3
      ) {
        this.move([13.824, 1.556, -3.544], [-90 / 180, -78.92 / 180, -90 / 180])
        animationName = '6'
        // this.$emit('tipstextfn', '正在进行样品离心，请稍后')
        // this.$emit('audo', require('@/images/audios/pz02.mp3'))
      }
      if (realName == 'LiXinJi4' && this.eritems == 6.2 && this.taskstep == 3) {
        animationName = '7'
        // this.$emit('audo', require('@/images/audios/pz02.mp3'))
      }
      if (
        realName == 'LiXinJi17' &&
        this.eritems == 6.3 &&
        this.taskstep == 3
      ) {
        this.$emit('tipstextfn', '离心机电源已关闭')
        // this.$emit('audo', require('@/images/audios/pz02.mp3'))
      }
      if (
        realName == 'LiXinJi31_1' &&
        this.eritems == 7 &&
        this.taskstep == 3
      ) {
        this.$emit('tipstextfn', '离心后的样品无异常')
        // this.$emit('audo', require('@/images/audios/pz02.mp3'))
      }
      if (
        realName == 'LiXinJi31_1' &&
        this.eritems == 1 &&
        this.taskstep == 4
      ) {
        this.$emit('tipstextfn', '已拿起离心后的样品')
        animationName = '8'
        // this.$emit('audo', require('@/images/audios/pz02.mp3'))
      }
      if (realName == 'TuoGaiJi7' && this.eritems == 2 && this.taskstep == 4) {
        this.LiXinJi32.visible = true
        this.$emit('tipstextfn', '正在开盖，请稍等')
        animationName = '9'
        // this.$emit('audo', require('@/images/audios/pz02.mp3'))
      }
      if (
        realName == 'FenXiYi12_2' &&
        this.eritems == 1 &&
        this.taskstep == 5
      ) {
        this.$emit('tipstextfn', '供电系统、供水系统、排水系统无异常')
      }
      if (realName == 'FenXiYi41' && this.eritems == 2 && this.taskstep == 5) {
        this.$emit('tipstextfn', '仪器电源已开启')
      }
      if (realName == 'FenXiYi41' && this.eritems == 14 && this.taskstep == 5) {
        this.$emit('tipstextfn', '仪器电源已关闭')
      }
      if (realName == 'DianNao3' && this.eritems == 2.1 && this.taskstep == 5) {
        this.$emit('clickItem', 'DianNao3')
      }
      if (realName == 'FenXiYi23' && this.eritems == 6 && this.taskstep == 5) {
        animationName = '1'
        this.$emit('tipstextfn', '试剂仓门已打开')
      }
      if (
        realName == 'BingXiang1' &&
        this.eritems == 6.1 &&
        this.taskstep == 5
      ) {
        this.$emit('tipstextfn', '试剂盒已取出')
        animationName = '2'
      }
      if (
        realName == 'FenXiYi45' &&
        this.eritems == 6.2 &&
        this.taskstep == 5
      ) {
        animationName = '3'
      }
      if (
        realName == 'FenXiYi23' &&
        this.eritems == 6.3 &&
        this.taskstep == 5
      ) {
        animationName = '4'
      }
      if (realName == 'FenXiYi17' && this.eritems == 7 && this.taskstep == 5) {
        animationName = '5'
      }
      if (
        realName == 'BingXiang1' &&
        this.eritems == 8 &&
        this.taskstep == 5 &&
        this.sjstep == 1
      ) {
        animationName = '7'
        this.$emit('tipstextfn', '校准品已取出')
      }
      if (
        realName == 'BiaoBen1_1' &&
        this.eritems == 8.1 &&
        this.taskstep == 5 &&
        this.sjstep == 1
      ) {
        this.$emit('tipstextfn', '该校准品ID为C001')
      }
      if (
        realName == 'FenXiYi46' &&
        this.eritems == 8 &&
        this.taskstep == 5 &&
        this.sjstep == 5
      ) {
        animationName = '8'
      }
      if (
        realName == 'JiaoZhunPin2' &&
        this.eritems == 8.5 &&
        this.taskstep == 5 &&
        this.sjstep == 5
      ) {
        animationName = '9'
      }
      if (
        realName == 'FenXiYi46' &&
        this.eritems == 8.51 &&
        this.taskstep == 5 &&
        this.sjstep == 5
      ) {
        animationName = '10'
      }
      if (
        realName == 'FenXiYi46' &&
        this.eritems == 8 &&
        this.taskstep == 5 &&
        this.sjstep == 7
      ) {
        animationName = '12'
      }
      if (
        realName == 'JiaoZhunPin2' &&
        this.eritems == 8.71 &&
        this.taskstep == 5 &&
        this.sjstep == 7
      ) {
        animationName = '13'
        this.$emit('tipstextfn', '已将校准品从进样口取出')
      }
      if (
        realName == 'FenXiYi46' &&
        this.eritems == 8.72 &&
        this.taskstep == 5 &&
        this.sjstep == 7
      ) {
        animationName = '14'
      }
      if (
        realName == 'BingXiang1' &&
        this.eritems == 9 &&
        this.taskstep == 5 &&
        this.sjstep == 1
      ) {
        animationName = '15'
        this.$emit('tipstextfn', '质控品已取出')
      }
      if (
        (realName == 'ZhiKongPin1' || realName == 'JiaoZhunPin2') &&
        this.eritems == 9.1 &&
        this.taskstep == 5 &&
        this.sjstep == 1
      ) {
        this.$emit('tipstextfn', '已查看质控品数量及批号')
      }
      if (
        realName == 'FenXiYi46' &&
        this.eritems == 9 &&
        this.taskstep == 5 &&
        this.sjstep == 5
      ) {
        animationName = '16'
      }
      if (
        realName == 'ZhiKongPin1' &&
        this.eritems == 9.4 &&
        this.taskstep == 5 &&
        this.sjstep == 5
      ) {
        animationName = '17'
        this.$emit('tipstextfn', '已将质控品放入进样口')
      }
      if (
        realName == 'FenXiYi46' &&
        this.eritems == 9.41 &&
        this.taskstep == 5 &&
        this.sjstep == 5
      ) {
        animationName = '18'
      }
      if (
        realName == 'FenXiYi46' &&
        this.eritems == 9 &&
        this.taskstep == 5 &&
        this.sjstep == 7
      ) {
        animationName = '20'
      }
      if (
        realName == 'ZhiKongPin1' &&
        this.eritems == 9.7 &&
        this.taskstep == 5 &&
        this.sjstep == 7
      ) {
        animationName = '21'
        this.$emit('tipstextfn', ' 已将质控品从进样口取出')
      }
      if (
        realName == 'FenXiYi46' &&
        this.eritems == 9.71 &&
        this.taskstep == 5 &&
        this.sjstep == 7
      ) {
        animationName = '22'
      }
      if (
        realName == 'FenXiYi46' &&
        this.eritems == 10 &&
        this.taskstep == 5 &&
        this.sjstep == 3
      ) {
        animationName = '23'
      }
      if (
        realName == 'BiaoBen1_1' &&
        this.eritems == 10.3 &&
        this.taskstep == 5 &&
        this.sjstep == 3
      ) {
        animationName = '24'
        this.$emit('tipstextfn', ' 已将标本放入进样口')
      }
      if (
        realName == 'FenXiYi46' &&
        this.eritems == 10.31 &&
        this.taskstep == 5 &&
        this.sjstep == 3
      ) {
        animationName = '25'
      }
      if (
        realName == 'FenXiYi46' &&
        this.eritems == 10 &&
        this.taskstep == 5 &&
        this.sjstep == 5
      ) {
        animationName = '27'
      }
      if (
        realName == 'BiaoBen1_1' &&
        this.eritems == 10.5 &&
        this.taskstep == 5 &&
        this.sjstep == 5
      ) {
        animationName = '28'
        this.$emit('tipstextfn', ' 已将标本从进样口取出')
      }
      if (
        realName == 'FenXiYi46' &&
        this.eritems == 10.51 &&
        this.taskstep == 5 &&
        this.sjstep == 5
      ) {
        animationName = '29'
      }
      if (
        realName == 'DianNao1_2' &&
        this.eritems == 11 &&
        this.taskstep == 5
      ) {
        this.$emit('clickItem', 'DianNao1_2')
      }
      if (realName == 'FenXiYi40' && this.eritems == 14 && this.taskstep == 5) {
        this.$emit('tipstextfn', ' 电源已关闭')
        this.$emit('clickItem', 'FenXiYi40')
      }

      // console.log('dh')
      if (!animationName) {
        console.log(
          '未指定播放动画',
          animationName,
          '当前eritems',
          this.eritems,
          '当前taskstep',
          this.taskstep,
          '当前sjstep',
          this.sjstep
        )
        return
      }
      this.clearPoint()
      this.playAction(animationName, realName)
    },
    getRealName(object) {
      //根据模型返回其父级group的名称，且之后在objects中存在的才会返回名称
      let objectNames = this.objectNames
      if (objectNames.includes(object.name)) {
        return object.name
      } else {
        if (object.parent) {
          return this.getRealName(object.parent)
        } else {
          return ''
        }
      }
    },
    onDocumentMouseMove(event) {
      // 相机移动视角
      // 鼠标左键拖动时移动视角
      if (document.pointerLockElement === document.body && this.myshow) {
        this.camera.rotation.x -= event.movementY / 500
        this.camera.rotation.y -= event.movementX / 500
      }

      // if (this.leftMouseBtn && this.myshow) {
      //   this.camera.rotation.x -= event.movementY / 2000
      //   this.camera.rotation.y -= event.movementX / 2000
      // }
      //鼠标移动，用射线检测鼠标覆盖的东西，并弹出标识
      let maincontWidth = this.$el.offsetWidth
      let maincontHeight = this.$el.offsetHeight
      this.mouse.x = (event.offsetX / maincontWidth) * 2 - 1
      this.mouse.y = -(event.offsetY / maincontHeight) * 2 + 1
      this.raycaster.setFromCamera(this.mouse, this.camera)
      const intersections = this.raycaster.intersectObjects(this.objects)
      if (intersections.length > 0) {
        document.body.style.cursor = 'pointer'
        let textName = this.getTextName(
          this.getRealName(intersections[0].object)
        )
        this.tipShow = true
        this.tipPosition = {
          x: event.offsetX,
          y: event.offsetY
        }
        this.tipName = textName
      } else {
        document.body.style.cursor = 'initial'
        this.tipShow = false
        this.tipPosition = {
          x: event.offsetX,
          y: event.offsetY
        }
        this.tipName = ''
        this.selectedObjects = []
      }
    }, //鼠标按下播放动画
    onDocumentMouseDown(event) {
      // event.preventDefault()
      //鼠标移动，用射线检测鼠标覆盖的东西，并弹出标识

      let maincontWidth = this.$el.offsetWidth
      let maincontHeight = this.$el.offsetHeight
      this.mouse.x = (event.offsetX / maincontWidth) * 2 - 1
      this.mouse.y = -(event.offsetY / maincontHeight) * 2 + 1
      this.raycaster.setFromCamera(this.mouse, this.camera)
      const intersections = this.raycaster.intersectObjects(this.objects)
      if (intersections.length > 0) {
        document.body.style.cursor = 'pointer'
        if (intersections[0].object.name == this.jcname) {
          // this.addOutinesss('')
          document.exitPointerLock()
        }
        this.clickAfter(intersections[0].object.name)
      }

      if (document.pointerLockElement) {
        event.preventDefault()
      } else {
        // 2
      }
    },

    //按照坐标位置显示指示箭头
    twinklePoint(x, y, z) {
      if (this.sprite) {
        this.sprite.visible = true
        this.sprite.position.set(x, y, z)
        this.spriteTimer = setInterval(() => {
          this.sprite.visible = !this.sprite.visible
        }, 1000)
      }
    }, //清除指示箭头
    clearPoint() {
      if (this.sprite) {
        this.sprite.visible = false
      }
      if (this.spriteTimer) {
        clearInterval(this.spriteTimer)
        this.spriteTimer = null
      }
    },
    //物品描边提示步骤
    addOutinesss(name) {
      this.jcname = name
      let array = []
      array = this.objects.filter((item) => {
        if (item.name == name) {
          return item
        }
      })
      this.outlinePass.selectedObjects = array
    },

    getTextName(realName) {
      //根据模型名称返回对应汉字
      let textName = ''
      this.objectText.map((item) => {
        if (item.name == realName) {
          textName = item.text
        }
      })
      return textName
    },

    //镜头移动视角切换根据不同的步骤进行操作
    move(position, rotation) {
      // this.controls.enabled = false
      this.camera.position.set(position[0], position[1], position[2])
      this.camera.rotation.set(
        rotation[0] * Math.PI,
        rotation[1] * Math.PI,
        rotation[2] * Math.PI
      )
      this.camera.updateProjectionMatrix()
    }
  }
}
</script>
<style>
.dd {
  height: 100%;
  width: 100%;
}
.mykg {
  position: absolute;
  top: 30%;
  right: 20%;
  color: red;
  cursor: pointer;
  border: solid 1px red;
}
.qdan {
  z-index: 1000;
  position: absolute;
  top: 110px;
  left: calc(50% - 80px);
  cursor: pointer;
}
</style>
